<template>
  <div>
    <div class="box1">
      <van-search
        v-model="keyword"
        shape="round"
        background="transparent"
        placeholder="请输入课程名搜索"
        @input="onSearch"
      />
      <van-cell-group inset v-for="(item, index) in filList" :key="index">
        <van-cell style="alignItems: center" is-link to="/study">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div style="display: flex">
              <img
                style="width: 50px; borderradius: 20%"
                src="../1.png"
                alt=""
              />
              <div style="marginLeft: 5px; lineHeight: 20px">
                <span style="fontSize: 16px" class="custom-title">{{
                  item.class_name
                }}</span>
                <div style="marginTop: 5px">{{ item.t_name }}</div>
              </div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keyword: "",
      listData: [
        {
          class_name: "java",
          t_name: "代志富",
        },
        {
          class_name: "前端",
          t_name: "阿呆",
        },
        {
          class_name: "java",
          t_name: "不中用的",
        },
        {
          class_name: "python",
          t_name: "小垃圾",
        },
      ],
      filList: [],
    };
  },
  watch: {
    keyword: {
      immediate: true,
      handler(val) {
        this.filList = this.listData.filter((item) => {
          return item.class_name.indexOf(val) != -1;
        })
      }
    }
  },

  methods: {
    onSearch(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped>
.box1 {
  height: 100vh;
  background-color: #eee;
}
</style>